<template>
  <div class="doctor-form">
    <el-form :inline="true" :model="params">
      <el-form-item>
        <el-select v-model="params.hosipitor" placeholder="城市" @change="hosipitorzChange" clearable>
          <el-option
            v-for="(item, index) of hosipitor"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="params.doctorName" placeholder="请输入姓名" clearable @change="nameChange"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-button type="primary" plain class="add-btn" @click="goToAddDoctor">添加专家</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        hosipitor: "",
        doctorName: "",
      },
      hosipitor: [
        { label: "北京", value: "beijing" },
        { label: "上海", value: "shanghai" },
        { label: "深圳", value: "shenzhen" },
        { label: "赤峰", value: "chifeng" },
        { label: "长沙", value: "changsha" },
        { label: "浙江", value: "zhejiang" },
        { label: "大连", value: "dalian" },
        { label: "南昌", value: "nanchang" },
        { label: "武汉", value: "wuhan" },
      ],
    };
  },
  methods: {
    onSubmit() {
      this.$emit("nameChange",this.params)
    },
    nameChange() {
      this.$emit("nameChange",this.params)
    },
    hosipitorzChange(value) {
      this.$emit("hosipitorChange",this.params)
    },
    goToAddDoctor() {
      this.$router.push("/doctorManage/add")
    }
  },
};
</script>

<style lang="scss" scoped>
.doctor-form {
  .el-form {
    position: relative;
    .el-form-item:last-child {
      width: 10%;
      margin: 0;
    }
  }
  .add-btn{
   position: absolute;
   right: 0;
   top: 0;
   width: 112px;
   height: 40px;
   border-radius: 24px;
  }
}
</style>
